<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="telephone=no,email=no" name="format-detection">
  <title>订单详情</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" type="text/css" href="css/member_order_detail201906301820.css">
</head>

<body>
  <div class="member_con" id="app" v-if="data" v-cloak>
    <div class="header"><span class="member_fanhui" @click="goback()">返回</span>订单详情</div>

    <div class="page-con">
      <div class="order_bar">
        <div class="progress_bar">
          <template v-if="data.status === 'PUBLISHING_PROCUREMENT'">
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
            <em class="state_1 active">已接单</em>
            <em class="state_2">采买中</em>
            <em class="state_3">配送中</em>
            <em class="state_4">已收货</em>
          </template>
          <template v-if="data.status === 'PROCURING'">
            <ul>
                <li class="active"></li>
                <li></li>
                <li></li>
            </ul>
            <span class="active"></span>
            <span class="active"></span>
            <span></span>
            <span></span>
            <em class="state_1 active">已接单</em>
            <em class="state_2 active">采买中</em>
            <em class="state_3">配送中</em>
            <em class="state_4">已收货</em>
          </template>
          <template v-if="data.status === 'PROCURE_FINISHED'">
            <ul>
                <li class="active"></li>
                <li></li>
                <li></li>
            </ul>
            <span class="active"></span>
            <span class="active"></span>
            <span></span>
            <span></span>
            <em class="state_1 active">已接单</em>
            <em class="state_2 active">采买完成</em>
            <em class="state_3">配送中</em>
            <em class="state_4">已收货</em>
          </template>
          <template v-if="data.status === 'DELIVERING'">
            <ul>
                <li class="active"></li>
                <li class="active"></li>
                <li></li>
            </ul>
            <span class="active"></span>
            <span class="active"></span>
            <span class="active"></span>
            <span></span>
            <em class="state_1 active">已接单</em>
            <em class="state_2 active">采买中</em>
            <em class="state_3 active">配送中</em>
            <em class="state_4">已收货</em>
          </template>
          <template v-if="data.status === 'DELIVER_FINISHED' || data.status === 'FINISHED'">
            <ul>
                <li class="active"></li>
                <li class="active"></li>
                <li class="active"></li>
            </ul>
            <span class="active"></span>
            <span class="active"></span>
            <span class="active"></span>
            <span class="active"></span>
            <em class="state_1 active">已接单</em>
            <em class="state_2 active">采买中</em>
            <em class="state_3 active">配送中</em>
            <em class="state_4 active">已收货</em>
          </template>
          <template v-if="data.status === 'CANCELED'">
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <em class="state_1">已接单</em>
            <em class="state_2">采买中</em>
            <em class="state_3">配送中</em>
            <em class="state_4">已收货</em>
          </template>
        </div>
      </div>

      <div class="address">
        <div class="clearfix">{{data.receiverName}} （{{data.sex === 'MALE' ? '先生' : '女士'}}）<span style="margin-left: 4vw">{{data.mobile}}</span>
          <p>{{data.address}}</p>
        </div><em></em>
      </div>

      <div class="order_list">
        <div class="order_list_top bd_bottom clearfix"><span v-if="data.status === 'PUBLISHING_PROCUREMENT'">正在发布采买任务</span>
            <span v-else-if="data.status === 'PROCURING'">商品采买中</span>
            <span v-else-if="data.status === 'PROCURE_FINISHED'">采买完成</span>
            <span v-else-if="data.status === 'DELIVERING'">配送中</span>
            <span v-else-if="data.status === 'DELIVER_FINISHED'">已完成</span>
            <span v-else-if="data.status === 'CANCELED'">已取消</span>{{data.createDate}}</div>
        <div class="goods_list">
          <ul>
              <li v-for="product in data.shoppingCarList" :key="product.goodsSkuId">
                  <img :src="product.goodsSkuImage">
                  <div class="goods_h3">{{product.goodsName}}</div>
                  <div class="goods_price">
                      <ul>
                          <li>最低价：{{product.minPrice}}元<span>{{product.minSupermarketName}}</span></li>
                          <li>最高价：{{product.maxPrice}}元<span>{{product.maxSupermarketName}}</span></li>
                      </ul>
                  </div>
                  <div class="goods_spread">价差率：{{product.spreadRate}}</div>
                  <div class="goods_num">数量：×{{product.quantity}}</div>
                  <div class="goods_total">合计：￥{{product.heJiPrice}}</div>
              </li>
          </ul>
        </div>
        <div class="goods_cost bd_bottom">
            <ul>
                <li>商品总价<span>{{data.goodsTotalPrice}}元</span></li>
                <li>服务费<span>{{data.serviceFeeString}}元</span></li>
                <li>附加费用<span>{{data.extraFeeString}}元</span></li>
                <li>合计<span>{{data.totalPrice}}元</span></li>
            </ul>
        </div>
        <div class="real_price clearfix"><span></span><em></em>实付<p>{{data.payPrice}}元</p></div>
      </div>

      <div class="order_detail">
          <div class="detail_title"><em></em>订单详情</div>
          <div class="detail_list bd_bottom">
              <ul>
                <li><span>订单备注：</span>{{data.remark}}</li>
                <li><span>订单编号：</span>{{data.ordersId}}</li>
                <li><span>支付编号：</span>{{data.payNumber}}</li>
                <li><span>创建时间：</span>{{data.createDateStr}}</li>
                <li v-if="data.deliveryTime"><span>发货时间：</span>{{data.deliveryTime}}</li>
                <li v-if="data.receiptTime"><span>收货时间：</span>{{data.receiptTime}}</li>
                <!--<li><span>投诉网点：</span>{{data.communityName}}<em></em></li>-->
              </ul>
          </div>
          <div class="detail_btn">
              <ul>
                  <li>
                      <a :href="'tel:' + data.serviceMobile" class="btn_public btn_customer">联系客服</a>
                  </li>
                  <li>
                      <a :href="'tel:' + data.communityPhone" class="btn_public btn_dot">联系网点</a>
                  </li>
              </ul>
          </div>
      </div>
    </div>

    <div class="footer_btn">
        <ul><template v-if="data.status === 'PUBLISHING_PROCUREMENT'">
              <li></li>
              <li></li>
              <li><button type="submit" id="take_all" @click="btnCancel()">取消订单</button></li>
            </template>
            <template v-else-if="data.status === 'DELIVERING'">
              <li></li>
              <li></li>
              <li><button type="submit" id="take_all" @click="btnOk()">确认收货</button></li>
            </template>
            <template v-else-if="data.status === 'DELIVER_FINISHED' || data.status === 'FINISHED'">
              <li></li>
              <li></li>
              <li><button type="submit" id="take_all" @click="btnBuy()">再次购买</button></li>
            </template>
            <template v-else-if="data.status === 'CANCELED'">
              <li></li>
              <li></li>
              <li><button type="submit" id="take_all" @click="btnBuy()">继续购买</button></li>
            </template>
        </ul>
    </div>

    <div class="toast" v-show="errMsg"><span v-html="errMsg"></span></div>
  </div>

  <script type="text/javascript" src="../js/vue.js"></script>
  <!-- <script type="text/javascript" src="../js/vue.min.js"></script> -->
  <script type="text/javascript" src="../js/axios.min.js"></script>
  <script src="../js/fetch20190612.js"></script>
  <script type="text/javascript" src="js/member_order_detail201906040920.js"></script>
  <script type="text/javascript" src="../js/check.js"></script>
</body>

</html>
